<template>
  <div>
    <el-container>
      <Aside></Aside>
      <el-container id="container">
        <el-header>
          <Top></Top>
        </el-header>
        <el-main>
          <el-input
            v-model="search"
            ref="input"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            placeholder="输入关键字搜索"
            id="inputed"
          />
          <el-card>
            <!-- 表格部分 -->
            <el-table
              :data="
                tableData
                  .slice((currentPage - 1) * pagesize, currentPage * pagesize)
                  .filter(
                    (data) =>
                      !search ||
                      data.name.toLowerCase().includes(search.toLowerCase())
                  )
              "
              border
              style="width: 100%"
            >
              <el-table-column prop="id" label="ID" width="80z" align="center">
              </el-table-column>
              <el-table-column
                prop="img"
                label="产品图"
                align="center"
                width="320"
              >
                <template v-slot:default="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="商品名称"
                width="300"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="cell"
                label="价格"
                width="300"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                width="300"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="num" label="数量" align="center">
              </el-table-column>
            </el-table>
            <!-- 分页部分 -->
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pagesize"
              layout="total,prev,pager,next"
              :total="tableData.length"
            >
            </el-pagination>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import axios from "axios";
import Aside from "@/components/Aside";
import Top from "@/components/Top";
export default {
  components: {
    Aside,
    Top,
  },
  data() {
    return {
      currentPage: 1,
      pagesize: 5,
      tableData: [],
      // 搜索
      search: "",
    };
  },
  methods: {
    // 获取数据
    getTableList() {
      axios.get("http://127.0.0.1:3000/student").then((res) => {
        this.tableData = res.data;
        console.log(res);
      });
    },
    //分页当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //搜索
    handleEdit(index, row) {
      console.log(index, row);
    },
  },
  mounted() {
    this.getTableList();
    this.$nextTick(() => {
      this.$refs.input.focus();
    });
  },
};
</script>
<style>
.pieReport {
  width: 100%;
  height: 126px;
}
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #2d353c;
  color: #333;
  text-align: left;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
#container {
  margin-left: 200px;
}
body {
  background-color: #e9eef3;
}
#inputed {
  float: left;
  width: 200px;
  height: 40px;
}
.el-pagination{
  margin-top: 20px;
}
</style>
